<template>
  <div class="listContentBox ">
    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="4" :queryData="queryData" @getQuery="getList" />
    <div class="listBox p-px-l-24 p-px-r-24 p-px-t-16 p-px-b-16">
      <el-row class="listBoxbtn m-px-b-16">
        <el-col :span="24">
          <el-button type="primary" @click="handleDialog('add','新增','')">新增</el-button>
        </el-col>
      </el-row>
      <div class="listBoxTable">
        <el-table v-loading="listLoading" height="100%" :data="list">
          <el-table-column label="字典编号" prop="dictId" show-overflow-tooltip width="100" />
          <el-table-column label="字典名称" prop="dictName" show-overflow-tooltip min-width="300" />
          <el-table-column label="字典类型" show-overflow-tooltip width="300">
            <template slot-scope="scope">
              <!-- <router-link :to="'/dict/type/data/' + scope.row.dictId" class="link-type"> -->
              <span class="jumpSpan" @click="jumpRouterMixins('/dict/type/data/' + scope.row.dictId,'',true)">{{ scope.row.dictType }}</span>
              <!-- </router-link> -->

            </template>
          </el-table-column>
          <el-table-column label="状态" prop="statusLabel" width="140" show-overflow-tooltip />
          <el-table-column label="备注" prop="remark" width="400" show-overflow-tooltip />
          <el-table-column label="创建时间" prop="createTime" width="190">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDialog('edit','修改',scope.row)">修改</el-button>
              <el-button type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <!-- 列表缺省 -->
          <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
            <el-empty :image-size="70" description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
      <pagination :total="listTotal" :page.sync="queryData.queryParams.pageNum" :limit.sync="queryData.queryParams.pageSize" @pagination="getList" />
    </div>
    <dialogForm ref="dialogForm" />
  </div></template>

<script>
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink'
import dialogForm from './dialogForm'
// ---------------------------------------------------------------------------------------
export default {
  name: 'Dict',
  mixins: [listMixins],
  components: { advancedQueryShrinkComponent, dialogForm },
  provide() {
    return {
      listQueryParams: this
    }
  },
  data() {
    return {
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: [
          {
            label: '字典名称', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'dictName' // 查询入参Key
          },
          {
            label: '字典类型', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'dictType' // 查询入参Key
          },
          {
            label: '状态', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'status', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'dicts', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getDicts: 'sys_normal_disable', // 数据字典类型值
            multiple: false// 是不是多选
          },
          {
            label: '创建时间', // 前端展示的label
            type: 'date', // 格式：数字格式  回填至格式 yyyy-mm-dd
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'createStartDate', // 区间开始查询入参Key
            endKey: 'createEndDate'// 区间结束查询入参Key
          }
        ]
      }
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {

    /**
    * @description: 列表
    * @Author: baoxuhui
    * @param {*} queryParams
    * @return {*}
    */
    getList(queryParams) {
      this.getListMixins('/system/dict/type/list', queryParams)
    },
    /**
    * @description: 删除
    * @Author: baoxuhui
    * @param {*} row
    * @return {*}
    */
    handleDelete(row) {
      const url = '/system/dict/type/removeById/' + row.dictId
      this.handleDeleteMixins(url)
    },
    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type//弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typeName//弹窗title '新增'，修改，'详情'
     * @param {*} row//参row
     * @return {*}
     */
    handleDialog(type, typeName, row) {
      this.$refs['dialogForm'].dialogResetForm()
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typeName
      if (type !== 'add') {
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    }
  }
}
</script>
